<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted, watch, computed } from 'vue';
import { Search, Operation, Delete, Edit, Close } from '@element-plus/icons-vue'
import { ElMessageBox, ElNotification } from 'element-plus';

const columns = [
    {
        title: '线索名称',
        key: 'clueName',
        sortable: true,
        fixed: 'left'
    },
    {
        title: '跟进负责人',
        key: 'followOwner',
        filterable: true
    },
    {
        title: '上次联系时间',
        key: 'lastContactTime',
        sortable: true
    },
    {
        title: '线索状态',
        key: 'clueStatus',
        filterable: true
    },
    {
        title: '下次联系时间',
        key: 'nextContactTime',
        sortable: true
    },
    {
        title: '客户来源',
        key: 'customerSource',
        filterable: true
    },
    {
        title: '跟进阶段',
        key: 'followStage',
        filterable: true
    },
    {
        title: '最近分配时间',
        key: 'lastAssignTime',
        sortable: true
    },
    {
        title: '意向产品',
        key: 'intentionProduct'
    },
    {
        title: '所属部门',
        key: 'department'
    },
    {
        title: '线索创建时间',
        key: 'createTime',
        sortable: true
    },
    {
        title: '增值税类型',
        key: 'vatType'
    },
    {
        title: '线索提交人',
        key: 'submitter'
    },
    {
        title: '线索创建人',
        key: 'creator'
    }
];

// 状态管理
const mockData = ref([]);
const allData = ref([]);
const recycleBin = ref([]); // 回收站数据
const loading = ref(true);
const searchText = ref('');
const includeFinished = ref(false);
const activeName = ref('first');

// 编辑侧边栏相关
const editPanelVisible = ref(false);
const editForm = ref({});
const currentEditIndex = ref(-1);
const editFormRef = ref(null);

// 扩展筛选表单
const filterForm = ref({
    followOwner: '',
    clueStatus: '',
    customerSource: '',
    followStage: '',
    clueLevel: '',
    department: '',
    nextContactTimeRange: [],
    lastContactTimeRange: [],
    lastAssignTimeRange: [],
    createTimeRange: [],
    vatType: '',
    submitter: '',
    sharedPerson: '',
    creator: '',
    establishTimeRange: [],
    expectedDealTimeRange: [],
    expectedDealAmount: ''
});

// 筛选选项数据
const filterOptions = ref({
    followOwner: ['张三', '李四', '王五', '赵六', '孙八', '吴十', '陈十二', '杨十四'],
    clueStatus: ['跟进中', '已分配', '未联系', '已成交', '已丢单'],
    customerSource: ['线上广告', '合作伙伴推荐', '展会获取', '官网注册', '电话营销', '客户转介绍'],
    followStage: ['初步接触', '需求确认', '方案演示', '商务谈判', '成交', '丢单'],
    clueLevel: ['高', '中', '低'],
    department: ['销售一部', '销售二部', '销售三部'],
    vatType: ['一般纳税人', '小规模纳税人'],
    submitter: ['李四', '赵六', '孙八', '钱七', '周九'],
    sharedPerson: ['张三', '李四', '王五', '赵六', '孙八'],
    creator: ['王五', '钱七', '周九', '系统'],
    expectedDealAmount: ['10万以下', '10-50万', '50-100万', '100-500万', '500万以上']
});

// 计算属性：根据筛选条件过滤数据
const filteredData = computed(() => {
    let data = [...allData.value];
    
    // 标签页筛选
    if (activeName.value === 'second') {
        data = data.filter(item => item.clueStatus === '未联系');
    } else if (activeName.value === 'third') {
        data = data.filter(item => item.clueStatus === '已分配');
    }
    
    // 是否包含已成交/已丢单
    if (!includeFinished.value) {
        data = data.filter(item => 
            item.clueStatus !== '已成交' && item.clueStatus !== '已丢单'
        );
    }
    
    // 搜索框筛选
    if (searchText.value) {
        const keyword = searchText.value.toLowerCase();
        data = data.filter(item => 
            item.clueName.toLowerCase().includes(keyword) || 
            item.intentionProduct.toLowerCase().includes(keyword)
        );
    }
    
    // 高级筛选条件 - 使用下拉框的字段
    const filterFields = [
        'followOwner', 'clueStatus', 'customerSource', 'followStage', 
        'clueLevel', 'department', 'vatType', 'submitter', 
        'sharedPerson', 'creator', 'expectedDealAmount'
    ];
    
    filterFields.forEach(field => {
        if (filterForm.value[field]) {
            data = data.filter(item => item[field] === filterForm.value[field]);
        }
    });
    
    // 日期范围筛选
    const dateRangeFields = [
        { field: 'nextContactTimeRange', dataField: 'nextContactTime' },
        { field: 'lastContactTimeRange', dataField: 'lastContactTime' },
        { field: 'lastAssignTimeRange', dataField: 'lastAssignTime' },
        { field: 'createTimeRange', dataField: 'createTime' },
        { field: 'establishTimeRange', dataField: 'establishTime' },
        { field: 'expectedDealTimeRange', dataField: 'expectedDealTime' }
    ];
    
    dateRangeFields.forEach(({ field, dataField }) => {
        if (filterForm.value[field] && filterForm.value[field].length === 2) {
            const [start, end] = filterForm.value[field];
            data = data.filter(item => {
                if (!item[dataField] || item[dataField] === '-') return false;
                const itemDate = new Date(item[dataField].split(' ')[0]);
                return itemDate >= new Date(start) && itemDate <= new Date(end);
            });
        }
    });
    
    return data;
});

// 从localStorage加载回收站数据
const loadRecycleBin = () => {
    const saved = localStorage.getItem('recycleBin');
    if (saved) {
        recycleBin.value = JSON.parse(saved);
    }
};

// 保存回收站数据到localStorage
const saveRecycleBin = () => {
    localStorage.setItem('recycleBin', JSON.stringify(recycleBin.value));
};

// 监听回收站变化并保存
watch(recycleBin, saveRecycleBin, { deep: true });

// 打开编辑侧边栏
const openEditPanel = (row) => {
    const index = allData.value.findIndex(item => 
        item.clueName === row.clueName && item.createTime === row.createTime
    );
    
    if (index !== -1) {
        currentEditIndex.value = index;
        editForm.value = { ...row };
        editPanelVisible.value = true;
        // 阻止页面滚动
        document.body.style.overflow = 'hidden';
    }
};

// 保存编辑
const saveEdit = () => {
    if (currentEditIndex.value !== -1) {
        // 更新数据
        allData.value[currentEditIndex.value] = { ...editForm.value };
        
        ElNotification.success({
            title: '修改成功',
            message: '线索信息已更新',
        });
        
        closeEditPanel();
    }
};

// 关闭编辑侧边栏
const closeEditPanel = () => {
    editPanelVisible.value = false;
    editForm.value = {};
    currentEditIndex.value = -1;
    // 恢复页面滚动
    document.body.style.overflow = '';
};

// 删除线索到回收站
const deleteClue = (row) => {
    ElMessageBox.confirm(
        `确定要删除线索"${row.clueName}"吗？`,
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 复制要删除的数据并添加删除时间
        const itemToDelete = {
            ...row,
            deletedTime: new Date().toISOString() // 记录删除时间
        };
        
        // 从原数据中移除
        allData.value = allData.value.filter(item => 
            !(item.clueName === row.clueName && item.createTime === row.createTime)
        );
        
        // 添加到回收站
        recycleBin.value.push(itemToDelete);
        
        ElNotification.success({
            title: '删除成功',
            message: '线索已移至回收站',
        });
    }).catch(() => {
        // 取消删除
    });
};

// 应用筛选条件
const applyFilter = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 500);
}

// 重置筛选条件
const resetFilter = () => {
    filterForm.value = {
        followOwner: '',
        clueStatus: '',
        customerSource: '',
        followStage: '',
        clueLevel: '',
        department: '',
        nextContactTimeRange: [],
        lastContactTimeRange: [],
        lastAssignTimeRange: [],
        createTimeRange: [],
        vatType: '',
        submitter: '',
        sharedPerson: '',
        creator: '',
        establishTimeRange: [],
        expectedDealTimeRange: [],
        expectedDealAmount: ''
    };
    applyFilter();
}

// 标签切换处理
const handleClick = (tab, event) => {
    console.log(tab, event);
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 500);
};

// 获取所有线索数据
const getAllCluesData = () => {
    // 为每条数据添加唯一ID便于编辑
    return [
        {
            id: 1,
            clueName: '潜在客户A',
            followOwner: '张三',
            lastContactTime: '2023-10-15 14:30',
            clueStatus: '跟进中',
            nextContactTime: '2023-10-20 10:00',
            customerSource: '线上广告',
            followStage: '初步接触',
            lastAssignTime: '2023-10-10 09:15',
            intentionProduct: '企业版软件',
            department: '销售一部',
            createTime: '2023-10-05 08:30',
            vatType: '一般纳税人',
            submitter: '李四',
            creator: '王五',
            clueLevel: '高',
            sharedPerson: '李四',
            establishTime: '2020-05-15',
            expectedDealTime: '2023-12-15',
            expectedDealAmount: '100-500万'
        },
        {
            id: 2,
            clueName: '企业客户B',
            followOwner: '李四',
            lastContactTime: '2023-10-18 16:45',
            clueStatus: '已分配',
            nextContactTime: '2023-10-25 14:00',
            customerSource: '合作伙伴推荐',
            followStage: '需求确认',
            lastAssignTime: '2023-10-12 11:20',
            intentionProduct: '定制解决方案',
            department: '销售二部',
            createTime: '2023-10-08 10:15',
            vatType: '小规模纳税人',
            submitter: '赵六',
            creator: '钱七',
            clueLevel: '中',
            sharedPerson: '赵六',
            establishTime: '2019-08-20',
            expectedDealTime: '2023-11-30',
            expectedDealAmount: '50-100万'
        },
        {
            id: 3,
            clueName: '潜在客户C',
            followOwner: '王五',
            lastContactTime: '2023-10-20 09:30',
            clueStatus: '未联系',
            nextContactTime: '2023-10-28 15:30',
            customerSource: '展会获取',
            followStage: '初步接触',
            lastAssignTime: '2023-10-15 13:45',
            intentionProduct: '基础版软件',
            department: '销售一部',
            createTime: '2023-10-12 14:20',
            vatType: '一般纳税人',
            submitter: '孙八',
            creator: '周九',
            clueLevel: '低',
            sharedPerson: '孙八',
            establishTime: '2021-03-25',
            expectedDealTime: '2024-01-15',
            expectedDealAmount: '10-50万'
        },
        {
            id: 4,
            clueName: '大型企业D',
            followOwner: '赵六',
            lastContactTime: '2023-10-22 11:00',
            clueStatus: '跟进中',
            nextContactTime: '2023-10-30 09:00',
            customerSource: '官网注册',
            followStage: '方案演示',
            lastAssignTime: '2023-10-18 15:20',
            intentionProduct: '企业级解决方案',
            department: '销售三部',
            createTime: '2023-10-15 16:45',
            vatType: '一般纳税人',
            submitter: '吴十',
            creator: '系统',
            clueLevel: '高',
            sharedPerson: '吴十',
            establishTime: '2018-12-10',
            expectedDealTime: '2023-12-30',
            expectedDealAmount: '500万以上'
        },
        {
            id: 5,
            clueName: '中小企业E',
            followOwner: '孙八',
            lastContactTime: '2023-10-19 13:15',
            clueStatus: '已成交',
            nextContactTime: '-',
            customerSource: '电话营销',
            followStage: '成交',
            lastAssignTime: '2023-10-14 10:30',
            intentionProduct: '标准版软件',
            department: '销售二部',
            createTime: '2023-10-09 09:20',
            vatType: '小规模纳税人',
            submitter: '郑十一',
            creator: '陈十二',
            clueLevel: '中',
            sharedPerson: '郑十一',
            establishTime: '2022-07-18',
            expectedDealTime: '2023-10-25',
            expectedDealAmount: '10-50万'
        },
        {
            id: 6,
            clueName: '创业公司F',
            followOwner: '吴十',
            lastContactTime: '2023-10-17 15:45',
            clueStatus: '已丢单',
            nextContactTime: '-',
            customerSource: '客户转介绍',
            followStage: '丢单',
            lastAssignTime: '2023-10-11 14:15',
            intentionProduct: '创业版软件',
            department: '销售一部',
            createTime: '2023-10-06 11:30',
            vatType: '小规模纳税人',
            submitter: '王十三',
            creator: '李十四',
            clueLevel: '低',
            sharedPerson: '王十三',
            establishTime: '2023-02-14',
            expectedDealTime: '2023-11-10',
            expectedDealAmount: '10万以下'
        }
    ];
}

// 页面挂载时加载数据
onMounted(() => {
    loadRecycleBin(); // 加载回收站数据
    
    setTimeout(() => {
        allData.value = getAllCluesData();
        loading.value = false;
    }, 500);
});
</script>

<template>
    <div class="my-clue">
        <div class="top-filter">
            <div class="top-filter-left">
                <stick-popup>
                    <template #show>
                        <div class="top-filter-btn">
                            <div class="top-filter-btn-label">
                                筛选
                            </div>
                            <div class="top-filter-btn-icon">
                                <Operation />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <!-- 扩展筛选表单 -->
                        <div class="top-filter-form">
                            <el-form :model="filterForm" label-width="120px">
                                <el-form-item label="跟进负责人">
                                    <el-select v-model="filterForm.followOwner" placeholder="请选择跟进负责人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.followOwner" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索状态">
                                    <el-select v-model="filterForm.clueStatus" placeholder="请选择线索状态" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.clueStatus" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="客户来源">
                                    <el-select v-model="filterForm.customerSource" placeholder="请选择客户来源" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.customerSource" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="跟进阶段">
                                    <el-select v-model="filterForm.followStage" placeholder="请选择跟进阶段" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.followStage" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索等级">
                                    <el-select v-model="filterForm.clueLevel" placeholder="请选择线索等级" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.clueLevel" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="所属部门">
                                    <el-select v-model="filterForm.department" placeholder="请选择所属部门" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.department" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="下次联系时间">
                                    <el-date-picker
                                        v-model="filterForm.nextContactTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="上次联系时间">
                                    <el-date-picker
                                        v-model="filterForm.lastContactTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="最近分配时间">
                                    <el-date-picker
                                        v-model="filterForm.lastAssignTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="线索创建时间">
                                    <el-date-picker
                                        v-model="filterForm.createTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="增值税类型">
                                    <el-select v-model="filterForm.vatType" placeholder="请选择增值税类型" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.vatType" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索提交人">
                                    <el-select v-model="filterForm.submitter" placeholder="请选择线索提交人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.submitter" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索共享人">
                                    <el-select v-model="filterForm.sharedPerson" placeholder="请选择线索共享人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.sharedPerson" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="线索创建人">
                                    <el-select v-model="filterForm.creator" placeholder="请选择线索创建人" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.creator" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="成立日期">
                                    <el-date-picker
                                        v-model="filterForm.establishTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="预计成交时间">
                                    <el-date-picker
                                        v-model="filterForm.expectedDealTimeRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                                <el-form-item label="预计成交金额">
                                    <el-select v-model="filterForm.expectedDealAmount" placeholder="请选择预计成交金额" clearable>
                                        <el-option 
                                            v-for="item in filterOptions.expectedDealAmount" 
                                            :key="item" 
                                            :label="item" 
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="top-filter-operate">
                            <el-button @click="resetFilter">重置</el-button>
                            <el-button type="primary" @click="applyFilter">确定</el-button>
                        </div>
                    </template>
                </stick-popup>
                <div class="top-filter-search">
                     <el-input
                        v-model="searchText"
                        placeholder="搜索线索名称、意向产品..."
                        >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </div>
                <div class="top-filter-checkbox">
                    <el-checkbox v-model="includeFinished" label="包含已成交、丢单" size="default" border />
                </div>
            </div>
            <div class="top-filter-right">
                <el-button type="primary">导入线索</el-button>
                <el-button type="primary">新客户线索</el-button>
                <el-button type="primary">老客户线索</el-button>
                <el-button type="primary">导出</el-button>
                <!-- 回收站入口 -->
                <el-button type="warning" @click="$router.push('/recycle-bin')">
                    回收站 ({{ recycleBin.length }})
                </el-button>
            </div>
        </div>
        <div class="table-area">
            <div class="table-area-tab">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="first"></el-tab-pane>
                    <el-tab-pane label="未分配" name="second"></el-tab-pane>
                    <el-tab-pane label="已分配" name="third"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="table-area-table">
                <my-table 
                    :loading="loading" 
                    :columns="columns" 
                    :dataSource="filteredData" 
                    :showIndex="true" 
                    :show-operation="true"
                    scroll-x="1200">
                    <!-- 可排序字段的筛选模板 -->
                    <template #filter-clueName>
                        <span>线索名称</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-lastContactTime>
                        <span>上次联系时间</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-nextContactTime>
                        <span>下次联系时间</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-lastAssignTime>
                        <span>最近分配时间</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-createTime>
                        <span>线索创建时间</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <!-- 操作列模板，传入当前行数据 -->
                    <template #operation="scope">
                        <el-button type="text" @click="openEditPanel(scope.row)">修改</el-button>
                        <el-button type="text" @click="deleteClue(scope.row)">删除</el-button>
                    </template>
                </my-table>
            </div>
        </div>

        <!-- 编辑侧边栏 - 保留双列布局 -->
        <div class="edit-overlay" v-if="editPanelVisible" @click="closeEditPanel"></div>
        <div class="edit-panel" :class="{ 'edit-panel-visible': editPanelVisible }">
            <div class="edit-panel-header">
                <h3>修改线索信息</h3>
                <el-button icon="Close" circle @click="closeEditPanel" />
            </div>
            <div class="edit-panel-body">
                <el-form ref="editFormRef" :model="editForm" label-width="120px">
                    <!-- 第一行：线索名称 + 跟进负责人 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="线索名称">
                                <el-input v-model="editForm.clueName" placeholder="请输入线索名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="跟进负责人">
                                <el-select v-model="editForm.followOwner" placeholder="请选择跟进负责人" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.followOwner" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第二行：线索状态 + 跟进阶段 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="线索状态">
                                <el-select v-model="editForm.clueStatus" placeholder="请选择线索状态" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.clueStatus" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="跟进阶段">
                                <el-select v-model="editForm.followStage" placeholder="请选择跟进阶段" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.followStage" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第三行：客户来源 + 线索等级 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="客户来源">
                                <el-select v-model="editForm.customerSource" placeholder="请选择客户来源" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.customerSource" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="线索等级">
                                <el-select v-model="editForm.clueLevel" placeholder="请选择线索等级" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.clueLevel" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第四行：意向产品 + 所属部门 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="意向产品">
                                <el-input v-model="editForm.intentionProduct" placeholder="请输入意向产品" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属部门">
                                <el-select v-model="editForm.department" placeholder="请选择所属部门" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.department" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第五行：增值税类型 + 预计成交金额 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="增值税类型">
                                <el-select v-model="editForm.vatType" placeholder="请选择增值税类型" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.vatType" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="预计成交金额">
                                <el-select v-model="editForm.expectedDealAmount" placeholder="请选择预计成交金额" style="width: 100%">
                                    <el-option 
                                        v-for="item in filterOptions.expectedDealAmount" 
                                        :key="item" 
                                        :label="item" 
                                        :value="item"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第六行：线索提交人 + 线索创建人 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="线索提交人">
                                <el-input v-model="editForm.submitter" placeholder="请输入线索提交人" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="线索创建人">
                                <el-input v-model="editForm.creator" placeholder="请输入线索创建人" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第七行：上次联系时间 + 下次联系时间 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="上次联系时间">
                                <el-date-picker
                                    v-model="editForm.lastContactTime"
                                    type="datetime"
                                    placeholder="选择上次联系时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="下次联系时间">
                                <el-date-picker
                                    v-model="editForm.nextContactTime"
                                    type="datetime"
                                    placeholder="选择下次联系时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第八行：最近分配时间 + 线索创建时间 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="最近分配时间">
                                <el-date-picker
                                    v-model="editForm.lastAssignTime"
                                    type="datetime"
                                    placeholder="选择最近分配时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="线索创建时间">
                                <el-date-picker
                                    v-model="editForm.createTime"
                                    type="datetime"
                                    placeholder="选择线索创建时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD HH:mm"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <!-- 第九行：成立时间 + 预计成交时间 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="成立时间">
                                <el-date-picker
                                    v-model="editForm.establishTime"
                                    type="date"
                                    placeholder="选择成立时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="预计成交时间">
                                <el-date-picker
                                    v-model="editForm.expectedDealTime"
                                    type="date"
                                    placeholder="选择预计成交时间"
                                    style="width: 100%"
                                    value-format="YYYY-MM-DD"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="edit-panel-footer">
                <el-button @click="closeEditPanel">取消</el-button>
                <el-button type="primary" @click="saveEdit">保存</el-button>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.my-clue {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    overflow: auto;
    position: relative;
}
.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}
.top-filter-form, .top-filter-operate {
    width: 400px;
    background-color: #fff;
    display: flex;
    align-items: left;
    
}

.top-filter-form {
    padding: 10px;
}

.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;
        cursor: pointer;
        .top-filter-btn-icon {
            width: 20px;
            height: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .top-filter-search {
        width: 200px;
    }
}
.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
}

// 侧边编辑面板样式
.edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: opacity 0.3s;
}

.edit-panel {
    position: fixed;
    top: 0;
    right: -600px; /* 初始位置在右侧外部 */
    width: 600px;
    height: 100vh;
    background-color: #fff;
    z-index: 1001;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.edit-panel-visible {
    right: 0; /* 显示时滑入 */
}

.edit-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-panel-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto; /* 允许表单区域滚动 */
}

.edit-panel-footer {
    padding: 16px 20px;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

// 表单样式调整
:deep(.el-form-item) {
    margin-bottom: 18px;
}

:deep(.el-select), :deep(.el-input), :deep(.el-date-picker) {
    width: 100%;
}
</style>